import React from 'react'
import { connect } from 'dva'
import { Form ,Button,Modal,Popconfirm,Table,Row,Col,Input,Select,Cascader,Icon,Checkbox ,DatePicker} from 'antd'
import { Link, hashHistory,RouteProps } from 'dva/router'
import config from 'config/config'
import { mapStateToProps } from 'utils/view_utils'
import styles from './templatesListStyle.less'
import ListPage from 'widget/PageTmpl/ListPage'
import classnames from 'classnames/bind';
let cx=classnames.bind(styles);
import FlagBtn from 'widget/FlagBtn/FlagView'
import PriviewForm from 'widget/PriviewForm'
import Cookie from 'js-cookie'

const confirm = Modal.confirm;

const homeBannerListView = function({dispatch, model, form}) {
  // 表单的子函数
  const {resetFields, getFieldDecorator, validateFields, setFieldsValue} = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model
  let {saveData ,modalObj,hashUrl}  = modelObj
    
  function addOrEditSkip(type, item) {
    let token = Cookie.get(config.cookie.auth)
     if(type=='view'){
      saveData = JSON.parse(item).data;
      modalObj.visible = !modalObj.visible
      dispatch({
        type: `${namespace}/updateStore`,
        payload: { saveData,modalObj}
      })
     } else if(type=='update'){
       saveData = item;
       saveData.status = 2
      dispatch({
        type: `${namespace}/update`,
        payload: { ...saveData }
      })
     }
     else{
      hashHistory.push({
        pathname: '/home/infoAdmin/templatesDetail',
        query: { actionType: "edit",id:item,hashUrl:hashUrl }
      });
  
     }
   
  }
  function updateModal() {
    modalObj.visible = !modalObj.visible
    saveData = {}
    resetFields()

    dispatch({
      type: `${namespace}/updateStore`,
      payload: { modalObj,saveData }
    })
  }
  //删除
  function deleteContent(id) {
    confirm({
      title: '删除确认',
      content: '您真的要删除此条模版吗?',
      okText: '确认',
      okType: 'primary',
      cancelText: '取消',
      onOk() {
        
        dispatch({
          type: `${namespace}/updateStatus`,
          payload:{
            id:id,
            deleted:true
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  let pageProps = {
    // ---------- 界面部分 ----------
    ui: {
      // 页面接口地址
      api_url: `admin/questionForm/list`,
      //api_url: `admin/news/list`,
      // 接口方式
      method: "POST",
      // "data_field_name":"data",
      app: "",
      // 接口参数
      params: {
        formTitle:'',
        businessType:'',
        status:''
      },
      // 模拟数据 - 用于开发需要，若填充了上面的api_url之后，请将此项设置为null
      // "mockData": mockData,
      mockData: null,
      // 查询栏
      search_bar: {
        fields: [
          {
            en_name: 'formTitle',
            zh_name: '表单名称',
            elem_type: 'Input',
            elem_valid_type: 'string',
          },
          
          {
            en_name: 'status',
            zh_name: '状态',
            elem_type: 'Select',
            elem_valid_type: 'string',
            cmpt_items: [
                {
                    value: '0',
                    label: '全部'
                 }, 
                {
                    value: '1',
                    label: '草稿'
                },
                {
                    value: '2',
                    label: '发布'
                },
                {
                    value: '3',
                    label: '历史'
                }
            ],
          },
        ],
        searchHandler: () => { // 自定义搜索按钮回调函数，点击搜索时触发
          console.log('search click')
        },
        resetHandler: () => { // 自定义重置按钮回调函数，点击重置时触发
          console.log('reset click')
        },
        searchCallback: params => { // 自定义搜索完成后的后调函数, 搜索完成后触发, 并将本次搜索的参数传入
          console.log('search finish', params)
        },
        pasteTargetList: [  // 列表组件中将输入框的en_name作为默认id(也可以通过id另外设置)
          'channel',  // 将需要粘贴事件拦截的输入框id以数组的形式传入, 该参数对应PasteFromClipboard组件的targetList参数
        ]
      },
      // 数据表格  序号 资讯标题 所属项目  所属城市 创建人 创建时间 更新人 更新时间   操作
      table:
        {
          status_params: "status=0",
          status_text: "全部",
          // 表头字段列表
          scroll: { x: 1150 },
          fields: [
            {
              en_name: "formTitle",
              zh_name: "表单名称",
            },
            {
              en_name: "status",
              zh_name: "状态",
              render:(text,item,i)=>{
                if(text=='1'){
                    return <span>草稿</span>
                }else if(text=='2'){
                    return <span>发布</span>
                }else if(text=='3'){
                    return <span>历史</span>
                } 
            
        }
            },
            {
              en_name: "businessType",
              zh_name: "类型",
              render:(text,item,i)=>{
                if(text=='ACTIVITY_ENROLL'){
                    return <span>活动报名</span>
                }
            
        }
            },
            
            {
              en_name: "createTime",
              zh_name: "创建时间"
            },
            {
              en_name: "edit",
              zh_name: "操作",
              width:150,
              fixed:'right',
              render: (a, item, index, d, e, f) => {
                // console.log(item.advertisementId,item.status)
                var status = item.status==1?true:false
                return (
                  <span>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('view',item.formJson)}>查看<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                        <FlagBtn node={<a onClick={() => addOrEditSkip('edit',item.questionFormId)}>编辑<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>
                        {status?<FlagBtn node={<a onClick={() => addOrEditSkip('update',item)}>发布<span className="ant-divider" /></a>} btnId={''}> </FlagBtn>:''}
                        <FlagBtn node={<a onClick={() => deleteContent(item.questionFormId)}>删除</a>} btnId={''}> </FlagBtn>
                    </span>
                )
              },
            }
          ]
        },
      // 操作栏
      action_bar: [
        {
          func_name: "add",
          label: "新增模版",
          btnId:'',
          type: "primary",
          onClick: (e) =>{
            hashHistory.push({
              pathname: '/home/infoAdmin/templatesDetail',
              query: { actionType: "add",hashUrl:hashUrl }
            });
          
          }
        }
      ]
    },
  }
  
  if (!!modelObj.biz) {
		pageProps.biz = modelObj.biz
		pageProps.biz.syncBackCbf = (biz) => {
			dispatch({
				type: `${namespace}/updateStore`,
				payload: { biz }
			})
		}
  }

  return (
    
    <div className={cx('pageLayout')}>
    {
           <Modal
           title={'查看表单模版'}
           width='460px'
           // className="pubBiz_CommonModel"
           visible={modalObj.visible}
           onOk={() => { updateModal()}}
           onCancel={() => { updateModal() }}
         >
           <div className={styles.detailContainer}>
             <Form>
               <Row>
                 <Col>
                 {
                   saveData&&saveData.length>0&&saveData.map((e,i)=>{
                    return (
                      <PriviewForm
                      key={i}
                      form={e}
                      />
                    )
                  })
                 }
             
                 </Col>

               </Row>
             </Form>
           </div>
         </Modal>
        }
      <ListPage pageProps={pageProps}/>
    </div>
  )
}
// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(homeBannerListView))
